@import '../../colors.scss';

.tabBar {
	position: relative;
	display: flex;
}

.tab {
	display: inline-flex;
	align-items: center;
	padding: 0px 10px;
	&:hover {
		background-color: $gray_1;
	}

	& > span {
		position: relative;
		// pointer-events: none;
		user-select: none;
		cursor: default;
		white-space: nowrap;
		font: {
			size: 10px;
		}
		color: $white_1;

		&:hover {
			&::after {
				cursor: pointer;
			}
		}

		&::after {
			content: '';
			position: absolute;
			top: -8px;
			left: -10px;
			height: 28px;
			width: 115%;
		}
	}
}
.active {
	background-color: $gray_1;
}

.fakeTab {
	position: relative;
	display: inline;
	align-items: center;
	padding: 0px 10px;
	pointer-events: none;
	user-select: none;
	background-color: transparent;

	& > span {
		opacity: 0;
		white-space: nowrap;
		font: {
			size: 10px;
		}
	}
}

.tabClose {
	margin: 0px 0px 3px 10px;
	&:hover {
		cursor: pointer;
	}
}
.newTab {
	display: flex;
	align-items: center;
	padding: 2px 6px;
	&:hover {
		background-color: $black_1;
		cursor: pointer;
	}
}
